<template>
  <div class="bg-white">
    <div class="w-100 d-none d-lg-block">
      <div
        class="xboxbg pb-5 pt-5 d-flex align-items-center flex-column bg-light"
      >
        <div class="font-30 mt-5 text">推荐作品展</div>
        <div class="mt-2 mb-5">每日推荐高质量插画设计创意灵感</div>
      </div>
      <div class="d-none d-lg-block">
        <div class="w navbox">
          <div
            class="
              row
              border-50
              shadow
              search-box
              works-nav
              d-flex
              align-items-center
              justify-content-center
            "
          >
            <div
              class="col-6 d-flex justify-content-center align-items-center"
              style="height: 60%"
            >
              <a
                href="javascript:;"
                :class="index == 1 ? 'active' : ''"
                @click="changeNav(1, 'CompTuijianWorks')"
              >
                <img
                  src="http://www.gracg.com/_templates/css/img/tuijian.jpg"
                  alt=""
                />
                推荐作品
              </a>
            </div>
            <div
              class="col-6 d-flex justify-content-center align-items-center"
              style="height: 60%"
            >
              <a
                href="javascript:;"
                :class="index == 2 ? 'active' : ''"
                @click="changeNav(2, 'CompJingxuanWorks')"
              >
                <img
                  src="	http://www.gracg.com/_templates/css/img/jingxuan.jpg"
                  alt=""
                />
                作品精选
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="w">
      <component :is="comp"></component>
    </div>
    <div class="w">
      <comp-to-login v-if="!token">
        <span>登录后浏览更多插画师作品</span>
      </comp-to-login>
    </div>
  </div>
</template>

<script>
import CompJingxuanWorks from "../components/comp-jingxuan-works.vue";
import CompToLogin from "../components/comp-toLogin.vue";
import CompTuijianWorks from "../components/comp-tuijian-works.vue";
export default {
  components: {
    CompToLogin,
    CompTuijianWorks,
    CompJingxuanWorks,
  },
  data() {
    return {
      comp: "CompTuijianWorks",
      index: 1,
      token: null,
    };
  },
  methods: {
    changeNav(i, name) {
      this.index = i;
      this.comp = name;
    },
  },
  created() {
    this.token = localStorage.getItem("userToken");
  },
};
</script>

<style lang="less" scoped>
@import "../assets/reset";
.xboxbg {
  background-image: url(https://qiniucssjs.gracg.com/1xxxxx.jpg!org);
  color: #fff;
  background-size: cover;
  background-position: top;
  .text {
    font-weight: bold;
    font-size: 30px;
  }
  & ~ div {
    font-weight: light;
  }
}
.search-box {
  height: 60px;

  a {
    display: inline-block;
    color: #999;
    img {
      width: 30px;
      height: 30px;
    }
  }
  .active {
    color: #000;
  }
}
</style>